<template>
	<div>
		<v-navbar />
		<div class="deal mui-table-view" v-infinite-scroll="_getLatestDeal" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="10" infinite-scroll-immediate-check="false">
			<Row v-for="item in deal" :key=item.id style="background: #fff;margin-bottom:0.5rem;" @click.native="goDetail(item.id)">
				<Col class="deal_left" span="8">
					<img class="goodsImg" :src="item.goods_logo" alt="">
					<div class="shade">
						<img :src="able" alt="">
					</div>
				</Col>
				<Col class="deal_right" span="16">
					<p class="deal_name">{{item.name}}</p>
					<p class="deal_price">
						<span class="title">成交价</span>
						<span class="contP">￥{{item.goods_current_price}}</span>
						<span class="title marketP second">市场价 ￥{{item.market_retail_price}}</span>
						<span></span>
					</p>
					<p class="deal_man">
						<span class="title">成交人</span>
						<span class="content">{{item.real_name}}</span>
						<span class="title second">已优惠</span>
						<span class="content">￥{{item.market_retail_price - item.goods_current_price}}</span>
					</p>
					<p class="deal_time">
						<span class="title">成交时间 {{item.count_down}}</span>
					</p>
				</Col>
			</Row>
			<div class="more_loading" v-show="!queryLoading">
				<mt-spinner type="snake" color="#00ccff" :size="20" v-show="moreLoading&&!allLoaded"></mt-spinner>
				<span v-show="allLoaded">已全部加载</span>
			</div>
		</div>
	</div>

</template>

<script>
import navbar from '@c/navbar/navbar'
import able from '@imgs/latestDeal/able.png'
import { InfiniteScroll, Spinner } from 'mint-ui'
import { mapState, mapMutations } from 'vuex'
import { vpost, sonpost, fpost, gpost, vlink } from '@api/axios'

export default {
	data() {
		return {
			deal: [],
			queryLoading: false,
			moreLoading: false,
			allLoaded: false,
			totalNum: 0,
			pageSize: 20,
			limit: 10,
			able,
		}
	},

	components: {
		'v-navbar': navbar,
	},

	computed: {
		...mapState(['wtitle', 'rback']),
	},

	mounted() {
		this._getLatestDeal()
	},

	methods: {
		...mapMutations(['WTITLE', 'RBACK']),

		goDetail(id) {
			this.$router.push({
				path: 'dealDetail',
				name: 'DealDetail',
				query: {
					type: 0,
					id: id,
				},
			})
		},
		// 获得成交数据
		_getLatestDeal() {
			if (this.allLoaded) {
				this.moreLoading = true
				return
			}
			if (this.queryLoading) {
				return
			}
			this.moreLoading = !this.queryLoading
			let limt = {
				offset: this.totalNum,
				limit: this.limit,
			}
			this.totalNum += this.limit
			vpost(vlink.latestDeal, limt).then(re => {
				if (re.status === 0) {
					if (re.data.rows.length == 0) {
						this.allLoaded = true
					}
					this.deal = this.deal.concat(re.data.rows)
				} else {
					this.$Message.warning(re.msg)
				}
			})
            this.moreLoading = this.allLoaded
            this.RBACK(false)
		},
	},
	created() {
		this.WTITLE('今日成交')
		this.RBACK(false)
	},
}
</script>
<style scoped>
/* 头部标题 */
/* header {
	width: 100%;
	height: 4rem;
	background: -webkit-linear-gradient(left, #f60b0f, #f4305e);
	font-size: 1.2rem;
	color: #fff;
	text-align: center;
	line-height: 5rem;
} */
.deal {
	width: 100%;
	font-size: 0.8rem;
	background: #f6f6f6;
	margin-top: 45px;
}
/* 商品图片大小 */
.deal_left .goodsImg {
	width: 80%;
	height: 80%;
	margin: 1rem;
}
.deal_left .shade {
	width: 80%;
	height: 76%;
	background: #000000;
	opacity: 0.53;
	position: absolute;
	top: 1rem;
	left: 1rem;
	text-align: center;
}
.deal_left .shade img {
	width: 80%;
	display: inline-block;
	vertical-align: middle;
	margin-top: 20%;
}
/* 商品成交信息 */
.deal_right {
	padding: 0.8rem 0 0 1rem;
}
.deal_right p {
	line-height: 1.5rem;
}
.deal_right .deal_name {
	font-size: 0.85rem;
	color: #202020;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.deal_right .title {
	font-size: 0.8rem;
	color: #7e7e7e;
}
.deal_right .contP {
	font-size: 0.85rem;
	color: #ff0000;
}
.deal_right .marketP {
	text-decoration: line-through;
}
.deal_right .second {
	margin-left: 1rem;
}
.deal_right .content {
	color: #202020;
}
.deal .more_loading {
	text-align: center;
}
</style>